<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>app</title>
		<link rel="stylesheet" type="text/css" href="css/aui.css">
		<link rel="stylesheet" type="text/css" href="css/dtapp.css">
		<script type="text/javascript" src="./script/dtapp.js" ></script>
		<script type="text/javascript" src="./script/jquery-2.1.1.min.js" ></script>
		<style>
			.display-none {
				display: none !important;
			}
			.aui-nav .aui-bar-tab .active-warning .aui-iconfont, .aui-nav .aui-bar-tab .active-warning p {
				color: #52ace5;
			}
			.chat {
				background: #8f8f94;
				width: 45px;
				height: 45px;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				line-height: 45px;
				margin: 5px auto 0 auto;
				text-align: center;
			}
			.chat i.aui-iconfont {
				color: #fff !important;
				line-height: 45px !important;
				padding-top: 0 !important;
			}
			#aui-footer li.active-1d9dd5 .chat {
				background: #4385f6;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar dt-background-color1 header" id="index-header">
			<a class="aui-btn dt-background-color1 aui-pull-left" tapmode> <span class="aui-iconfont aui-icon-unfold"></span> </a>
			<div class="aui-title">
				DT之家欢迎您
			</div>
			<a class="aui-pull-right" onclick="dopenFrame('version','html/version.html')">
        <span class="aui-iconfont aui-icon-qrcode"></span>
    </a>
		</header>
		<header class="aui-bar aui-bar-nav dt-background-color1 header display-none" id="device-header">
			设备
		</header>
		<header class="aui-bar aui-bar-nav dt-background-color1 header display-none" id="msg-header">
			消息
		</header>
		<header class="aui-bar aui-bar-nav dt-background-color5 header display-none" id="my-header">
			我的
		</header>
		<footer class="aui-nav" id="aui-footer">
			<ul class="aui-bar-tab">
				<li class="active-warning" data-header="index" onclick="showActiveFrame(0,this)">
					<span class="aui-iconfont aui-icon-favorfill"></span>
					<p>
						首页
					</p>
				</li>
				<li id="tabbar2" data-header="device" onclick="showActiveFrame(1,this)">
					<span class="aui-iconfont aui-icon-repairfill"></span>
					<p>
						设备
					</p>
				</li>
				<li data-header="chat" tapmode >
					<div class="chat">
						<i class="aui-iconfont aui-icon-add fz30" style="color:#fff;"></i>
					</div>
				</li>
				<li id="tabbar3" data-header="msg" onclick="showActiveFrame(3,this)">
					<span class="aui-iconfont aui-icon-markfill"></span>
					<p>
						消息
					</p>
				</li>
				<li id="tabbar4" data-header="my" onclick="showActiveFrame(4,this)">
					<span class="aui-iconfont aui-icon-myfill"></span>
					<p>
						我的
					</p>
				</li>
			</ul>
		</footer>
		<script type="text/javascript" src="script/api.js"></script>
		<script type="text/javascript">
			function hideAllFrame(frameName) {
				$("#aui-footer li").each(function() {
					var headerId = $(this).attr("data-header");
					if (frameName != headerId) {
						api.setFrameAttr({
							name : headerId,
							hidden : true,
						});
					} else {
						api.setFrameAttr({
							name : headerId,
							hidden : false,
						});
					}
				});
			}

			// 显示对应frame
			function showActiveFrame(index, obj) {
				var indexFrames = [];
				var that = $("#aui-footer li").eq(index);
				// 获取data-header存储的值
				var headerId = that.attr("data-header");
				// 对应的dom头部
				var headerDOM = headerId + "-header";
				// 设置当前显示的frame名称
				currentFrameName = headerId;
				// 设置状态栏白色沉浸问题
				if (api.systemType == "android") {
					if (headerId == "case") {
						api.setStatusBarStyle({
							color : 'rgba(0,0,0,0.1)'
						});
					} else {
						api.setStatusBarStyle({
							color : 'rgba(0,0,0,0)'
						});
					}
				}
				$("#" + headerDOM).removeClass("display-none").siblings(".header").addClass("display-none");
				var header = $api.byId(headerDOM);
				$api.fixStatusBar(header);
				var header_h = $api.offset(header).h;
				var body_h = $api.offset($api.dom('body')).h;
				var footer_h = $api.offset($api.byId('aui-footer')).h;
				api.openFrame({
					name : headerId,
					url : 'html/' + headerId + '_body.html',
					rect : {
						x : 0,
						y : header_h,
						h : body_h - header_h - footer_h,
						marginLeft : 0,
						marginTop : 0,
						marginBottom : 0,
						marginRight : 0
					},
					bounces : false,
					opaque : true,
					vScrollBarEnabled : false,
					hScrollBarEnabled : false,
					scaleEnabled : false,
					showProgress : false,
					reload : false,
					allowEdit : true,
					softInputMode : 'auto',
					pageParam : {
					}
				});
				// 添加到数组中，标识这个frame已经打开，下次直接显示出来，无需在打开
				indexFrames.push(headerId);
				// 隐藏所有
				hideAllFrame(headerId);
				if (obj) {
					var footerAct = $api.dom($api.byId('aui-footer'), '.aui-bar-tab li.active-warning');
					$api.removeCls(footerAct, 'active-warning');
					$api.addCls(obj, 'active-warning');
				}
			}

			apiready = function() {
				showActiveFrame(0);
				$api.addEvt($api.byId('back'), 'click', function() {
					api.closeWin();
				});
				lclickToCloseApp();
			};
			function lclickToCloseApp() {
				var mkeyTime = new Date().getTime();
				api.addEventListener({
					name : "keyback"
				}, function(ret, err) {
					//if($location.$$path=='/index'){
					//如果当前时间减去标志时间大于2秒，说明是第一次点击返回键，反之为2秒内点了2次，则退出。
					if ((new Date().getTime() - mkeyTime) > 2000) {
						mkeyTime = new Date().getTime();
						api.toast({
							msg : '再按一次退出程序',
							duration : 2000,
							location : 'bottom'
						});
					} else {
					api.toast({
							msg : '祝君开心每一天',
							duration : 2000,
							location : 'bottom'
						});
						setTimeout(function() {
							api.closeWidget({
								silent : true
							});
						}, 500);
					}
					//}
				});
			}
		</script>
	</body>
</html>